import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {Slider, Upload, Icon, Tabs, Collapse, column} from 'antd';
import Util from '../../common/util';
import LinkWhere from '../../common/linkWhere/index';
import {host} from '../../config';
import SlideInput from '../../common/SlideInput/index';

const TabPane = Tabs.TabPane;
const Panel = Collapse.Panel;


function beforeUpload(file) {
    // const isJPG = file.type === 'image/jpeg';

    // if (!isJPG) {
    //     message.error('You can only upload JPG file!');
    // }
    // const isLt2M = file.size / 1024 / 1024 < 2;
    // if (!isLt2M) {
    //     message.error('Image must smaller than 2MB!');
    // }
    // return isJPG && isLt2M;

    return true;
}


class MCaseOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {
                imgList: []
            },
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data
        };

    }

    render() {
        var _self = this;
        var {style, dataset} = this.state.data;
        var imgList = dataset.imgList;

        return (
            <div className="optsPanel">
                <Tabs defaultActiveKey="1">
                    <TabPane tab="数据配置" key="1">
                        <Collapse activeKey={imgList.map(function (item) {
                            return item.uid + ''
                        })}>
                            {
                                imgList.map(function (item) {
                                    return (
                                        <Panel
                                            header={
                                                <div className="panelHeader">
                                                    <span className="panelHeader__title">{item.title}</span>
                                                </div>
                                            }
                                            key={item.uid}
                                        >
                                            <div className="tabBarOptsItem">
                                                <dl className="tabBarOptsItem__options">
                                                    <dt>图片</dt>
                                                    <dd>
                                                        <Upload
                                                            className="avatar-uploader"
                                                            name="image"
                                                            showUploadList={false}
                                                            action={`${host}/openapi/UploadImg/upload`}
                                                            beforeUpload={beforeUpload}
                                                            onChange={(info) => {
                                                                var response = info.file.response;
                                                                if (!response) {
                                                                    return;
                                                                }
                                                                var imgUrl = response.result.url;

                                                                item.img = imgUrl;
                                                                _self.$dataChange('imgList', imgList, 'dataset');
                                                            }}
                                                        >
                                                            {
                                                                item.img ?
                                                                    <img src={item.img} alt="" className="avatar"/> :
                                                                    <Icon type="plus"
                                                                          className="avatar-uploader-trigger"/>
                                                            }
                                                        </Upload>
                                                    </dd>
                                                    <dt>连接至</dt>
                                                    <dd>
                                                        <LinkWhere
                                                            onSelected={(linkData, linkType) => {
                                                                _self._selectedLink(item, linkData, linkType)
                                                            }}
                                                            defaultLinkData={item.linkData}
                                                            defaultLinkType={item.linkType}
                                                        />
                                                    </dd>
                                                </dl>
                                            </div>
                                        </Panel>
                                    )
                                })
                            }
                        </Collapse>
                    </TabPane>
                    <TabPane tab="样式配置" key="2">
                        <div className="optsPanel__item">
                            <label className="optsPanel__item__hd">左右外边距</label>
                            <div className="optsPanel__item__bd">
                                <SlideInput step={1} min={0} max={100} value={parseInt(style.marginLeft || 0)}
                                            onChange={(val) => {
                                                this.$dataChange('marginLeft', val + 'px', 'style');
                                                this.$dataChange('marginRight', val + 'px', 'style');
                                            }}/>
                            </div>
                        </div>

                        <div className="optsPanel__item">
                            <label className="optsPanel__item__hd">下外边距</label>
                            <div className="optsPanel__item__bd">
                                <SlideInput
                                    step={1} min={0} max={100}
                                    value={parseInt(style.marginBottom || 0)}
                                    onChange={(val) => {
                                        this.$dataChange('marginBottom', val + 'px', 'style');
                                    }}
                                />
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        );
    }

    componentDidMount() {
        var imgList = this.state.data.dataset.imgList || [];

        if (imgList.length == 0) {
            imgList = [
                {
                    uid: Util.getUId(),
                    img: 'http://cdn1.taojinzi.com/xcx/mCase/1-1.jpg',
                    title: '第一个商品',
                    linkType: '',
                    linkData: ''
                },
                {
                    uid: Util.getUId(),
                    title: '第二个商品',
                    img: 'http://cdn1.taojinzi.com/xcx/mCase/2-2.jpg',
                    linkType: '',
                    linkData: ''
                },
                {
                    uid: Util.getUId(),
                    title: '第三个商品',
                    img: 'http://cdn1.taojinzi.com/xcx/mCase/3-3.jpg',
                    linkType: '',
                    linkData: ''
                },
            ];
            this.$dataChange('imgList', imgList);
        }
    }

    _selectedLink(item, linkData, linkType) {
        var imgList = this.state.data.dataset.imgList || [];

        item['linkData'] = linkData;
        item['linkType'] = linkType;

        this.$dataChange('imgList', imgList);
    }
}

export default MCaseOpts;
